<template>
  <div>
    <ay-aside :page-info="pageInfo" />
    <div class="app-container">
      <div class="filter-container">
        <el-collapse v-model="filterNameKey" @change="handleChangeCollapse">
          <el-collapse-item title="筛选条件" name="1">
            <el-row>
              <el-input v-model="search.memberId" placeholder="会员ID" style="width: 150px;" class="filter-item" />
              <el-select v-model="search.applicationType" placeholder="商户号类型" clearable style="width: 200px" class="filter-item">
                <el-option :key="1" label="App商户号" :value="1" />
                <el-option :key="2" label="二维码商户号" :value="2" />
              </el-select>
              <el-select v-model="search.merchantType" placeholder="店铺类型" clearable style="width: 200px" class="filter-item">
                <el-option :key="1" label="个体工商号" :value="1" />
                <el-option :key="2" label="小微商户" :value="2" />
                <el-option :key="0" label="企业商户" :value="0" />
              </el-select>
              <!-- <el-input v-model="search.auditor" placeholder="审核人" style="width: 150px;" class="filter-item" /> -->
              <el-select v-model="search.status" placeholder="审核状态" clearable style="width: 200px" class="filter-item">
                <el-option :key="0" label="未审核" :value="1" />
                <el-option :key="1" label="审核通过" :value="2" />
                <el-option :key="2" label="审核不通过" :value="4" />
              </el-select>
              <el-select v-model="search.uaStatus" placeholder="签约状态" clearable style="width: 200px" class="filter-item">
                <el-option :key="0" label="未签约" value="0000" />
                <el-option :key="1" label="签约中" value="00" />
                <el-option :key="2" label="签约成功" value="01" />
                <el-option :key="3" label="入网审核中" value="02" />
                <el-option :key="4" label="入网成功" value="03" />
                <el-option :key="5" label="入网失败" value="04" />
                <el-option :key="6" label="对公账户待验证或异常" value="05" />
                <el-option :key="7" label="风控审核中" value="06" />
                <el-option :key="8" label="资料验证失败" value="28" />
                <el-option :key="9" label="冻结账户" value="31" />
                <el-option :key="10" label="其它错误" value="99" />
                <el-option :key="11" label="银联驳回" value="104" />
                <el-option :key="12" label="平台关联成功" value="106" />
              </el-select>
              <el-date-picker
                v-model="submitTimeTemp"
                class="filter-item"
                type="datetimerange"
                range-separator="至"
                start-placeholder="提交开始日期"
                end-placeholder="提交结束日期"
              />
            </el-row>
          </el-collapse-item>
        </el-collapse>
        <el-row>
          <el-button v-waves class="filter-item refresh-btn" icon="el-icon-refresh" @click="handleRefresh" />
          <el-button v-waves :loading="execelDownloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="dialogExcelVisible = true">导出</el-button>
          <transition name="el-zoom-in-center">
            <el-button v-show="isShowFilterBtn" v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">
              搜索
            </el-button>
          </transition>
          <transition name="el-zoom-in-center">
            <el-button v-show="isShowFilterBtn" v-waves class="filter-item" type="danger" icon="el-icon-close" @click="handleReset">
              重置
            </el-button>
          </transition>
        </el-row>
      </div>
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="tableData"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="#" align="center" width="60">
          <template slot-scope="{$index}">
            <span>{{ $index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="会员ID" align="center" min-width="50px">
          <template slot-scope="{row}">
            <span>{{ row.memberId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商户号类型" align="center" width="110px">
          <template slot-scope="{row}">
            <span>{{ row.applicationType|filterApplicationType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商户号" align="center" width="100px">
          <template slot-scope="{row}">
            <span>{{ row.ua_mapp_no }}</span>
          </template>
        </el-table-column>
        <el-table-column label="企业号" align="center" width="100px">
          <template slot-scope="{row}">
            <span>{{ row.ua_company_no }}</span>
          </template>
        </el-table-column>
        <el-table-column label="开户账号名称" align="center" width="80px">
          <template slot-scope="{row}">
            <span>{{ row.getApplicationData|filterReturnBankAcctName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="店铺类型" align="center" width="100px">
          <template slot-scope="{row}">
            <span>{{ row.merchantType|filterMerchantType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="提交时间" align="center" width="160px">
          <template slot-scope="{row}">
            <span>{{ row.createTime|filterTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="平台审核状态" align="center" width="100px">
          <template slot-scope="{row}">
            <span>{{ row.auditStatus|filterAuditStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核人" align="center" min-width="50px">
          <template slot-scope="{row}">
            <span>{{ row.auditName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核时间" align="center" width="160px">
          <template slot-scope="{row}">
            <span>{{ row.auditTime|filterTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核备注" align="center" min-width="100px">
          <template slot-scope="{row}">
            <span>{{ row.auditDescription }}</span>
          </template>
        </el-table-column>
        <el-table-column label="银联签约状态" align="center" min-width="60px">
          <template slot-scope="{row}">
            <span>{{ row.status|filterUaStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button v-show="row.auditStatus === 0" type="success" size="mini" plain @click="handlePass(row.id)">审核通过</el-button>
            <el-button v-show="row.auditStatus === 0" style="margin-left:0;" type="danger" size="mini" plain @click="handleBack(row.id)">审核驳回</el-button>
            <el-button v-show="row.status === '03'" style="margin-left:0;" type="success" size="mini" plain @click="handleBind(row.id)">绑定确认</el-button>
            <el-button style="margin-left:0;" type="primary" size="mini" plain @click="handleDetail(row.id)">详情</el-button>
            <el-button v-show="loginerId === '1'" style="margin-left:0;" type="danger" size="mini" plain @click="handleDelete(row.id)">删除数据</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="pageTotal > 0" :total="pageTotal" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" />
      <el-dialog title="申请资料" :visible.sync="dialogFormVisible" class="add-edit-dialog" @close="closeDialog">
        <el-form ref="dataForm" v-loading="dialogLoading" :rules="rules" :model="temp" label-position="right" label-width="150px">
          <el-collapse v-model="activeDialogCollapse">
            <el-collapse-item title="基本资料" name="1">
              <el-form-item label="法人姓名：">
                <el-input v-model="temp.legal_name" placeholder="法人姓名" disabled style="width: 320px" />
              </el-form-item>
              <el-form-item label="法人性别：">
                <el-select v-model="temp.legal_sex" placeholder="法人性别" disabled clearable style="width: 320px" class="filter-item">
                  <el-option :key="1" label="男" :value="1" />
                  <el-option :key="2" label="女" :value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="法人手机号：">
                <el-input v-model="temp.legal_mobile" placeholder="法人手机号" disabled style="width: 320px" />
              </el-form-item>
              <el-form-item label="法人邮箱：">
                <el-input v-model="temp.legal_email" placeholder="法人邮箱" disabled style="width: 320px" />
              </el-form-item>
              <el-form-item label="法人职业：">
                <el-select v-model="temp.legal_occupation" placeholder="法人职业" disabled clearable style="width: 320px" class="filter-item">
                  <el-option v-for="item in industryList" :key="item.id" :label="item.label" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="身份证正反面：" class="idcard-form-item">
                <div class="idcard-box">
                  <el-upload
                    class="idcard-uploader"
                    :action="uploadPath"
                    :show-file-list="false"
                    disabled
                    :on-success="handlePictureSuccess"
                    :before-upload="beforePictureUpload"
                  >
                    <img v-if="dialogFormVisible && !dialogLoading && temp.ossPicMap['0001']" :src="temp.ossPicMap['0001']" class="idcard">
                    <i v-else class="el-icon-plus idcard-uploader-icon" />
                  </el-upload>
                  <div class="idcard-name">
                    身份证正面
                    <span
                      class="zoom"
                      @click="handlePictureCardPreview(temp.ossPicMap['0001'])"
                    >
                      <i class="el-icon-zoom-in" />
                    </span>
                  </div>
                </div>
                <div class="idcard-box">
                  <el-upload
                    class="idcard-uploader"
                    :action="uploadPath"
                    :show-file-list="false"
                    disabled
                    :on-success="handlePictureSuccess"
                    :before-upload="beforePictureUpload"
                  >
                    <img v-if="dialogFormVisible && !dialogLoading && temp.ossPicMap['0011']" :src="temp.ossPicMap['0011']" class="idcard">
                    <i v-else class="el-icon-plus idcard-uploader-icon" />
                  </el-upload>
                  <div class="idcard-name">
                    身份证反面
                    <span
                      class="zoom"
                      @click="handlePictureCardPreview(temp.ossPicMap['0011'])"
                    >
                      <i class="el-icon-zoom-in" />
                    </span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="手持身份证照片：" class="idcard-form-item">
                <div class="idcard-box">
                  <el-upload
                    class="idcard-uploader"
                    :action="uploadPath"
                    :show-file-list="false"
                    disabled
                    :on-success="handlePictureSuccess"
                    :before-upload="beforePictureUpload"
                  >
                    <img v-if="dialogFormVisible && !dialogLoading && temp.ossPicMap['0007']" :src="temp.ossPicMap['0007']" class="idcard">
                    <i v-else class="el-icon-plus idcard-uploader-icon" />
                  </el-upload>
                  <div class="idcard-name">
                    手持身份证
                    <span
                      class="zoom"
                      @click="handlePictureCardPreview(temp.ossPicMap['0007'])"
                    >
                      <i class="el-icon-zoom-in" />
                    </span>
                  </div>
                </div>
              </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="营业信息" name="2">
              <el-form-item label="店铺类型：">
                <el-select v-model="temp.reg_mer_type" placeholder="店铺类型" disabled clearable style="width: 320px" class="filter-item" @change="handleChangeReg">
                  <el-option :key="1" label="个体工商号" value="01" />
                  <el-option :key="2" label="小微商户" value="02" />
                  <el-option :key="0" label="企业商户" value="00" />
                </el-select>
              </el-form-item>
              <el-form-item label="店铺名称：">
                <el-input v-model="temp.shop_name" placeholder="店铺名称" disabled style="width: 320px" />
              </el-form-item>
              <el-form-item label="店铺所在地：">
                <el-cascader
                  v-model="selectedShopAreaOptions"
                  :options="areaOptions"
                  placeholder="店铺所在地"
                  clearable
                  disabled
                  style="width: 320px"
                  @change="handleShopAreaChange"
                />
              </el-form-item>
              <el-form-item label="店铺道路名：">
                <el-input v-model="temp.shop_road" placeholder="店铺道路名" disabled style="width: 320px" />
              </el-form-item>
              <el-form-item label="店铺门牌号：">
                <el-input v-model="temp.shop_house_no" placeholder="店铺门牌号" disabled style="width: 320px" />
              </el-form-item>
              <el-form-item label="所属行业：">
                <!-- <el-select v-model="temp.industryCode" placeholder="所属行业" disabled clearable style="width: 320px" class="filter-item" @change="handleChangeIndustry">
                  <el-option v-for="item in industryPOptions" :key="item.id" :label="item.lable" :value="item.id" />
                </el-select> -->
                <el-input v-model="temp.industryText" placeholder="所属行业：" disabled style="width: 320px" />
              </el-form-item>
              <el-form-item label="详细行业：">
                <!-- <el-select v-model="temp.mccCode" placeholder="详细行业" disabled clearable style="width: 320px" class="filter-item">
                  <el-option v-for="item in industryCOptions" :key="item.id" :label="item.lable" :value="item.id" />
                </el-select> -->
                <el-input v-model="temp.industryDetailText" placeholder="详细行业：" disabled style="width: 320px" />
              </el-form-item>
              <el-form-item label="营业场所：" class="place-form-item">
                <div class="place-box">
                  <el-upload
                    class="place-uploader"
                    :action="uploadPath"
                    :show-file-list="false"
                    disabled
                    :on-success="handlePictureSuccess"
                    :before-upload="beforePictureUpload"
                  >
                    <img v-if="dialogFormVisible && !dialogLoading && temp.ossPicMap['0005']" :src="temp.ossPicMap['0005']" class="place">
                    <i v-else class="el-icon-plus place-uploader-icon" />
                  </el-upload>
                  <div class="place-name">
                    门头照片
                    <span
                      class="zoom"
                      @click="handlePictureCardPreview(temp.ossPicMap['0005'])"
                    >
                      <i class="el-icon-zoom-in" />
                    </span>
                  </div>
                </div>
                <div class="place-box">
                  <el-upload
                    class="place-uploader"
                    :action="uploadPath"
                    :show-file-list="false"
                    disabled
                    :on-success="handlePictureSuccess"
                    :before-upload="beforePictureUpload"
                  >
                    <img v-if="dialogFormVisible && !dialogLoading && temp.ossPicMap['0015']" :src="temp.ossPicMap['0015']" class="place">
                    <i v-else class="el-icon-plus place-uploader-icon" />
                  </el-upload>
                  <div class="place-name">
                    室内照片
                    <span
                      class="zoom"
                      @click="handlePictureCardPreview(temp.ossPicMap['0015'])"
                    >
                      <i class="el-icon-zoom-in" />
                    </span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item v-if="dialogFormVisible && !dialogLoading && temp.reg_mer_type !== '02'" label="营业执照：" class="commodity-form-item">
                <div class="commodity-box">
                  <el-upload
                    class="commodity-uploader"
                    :action="uploadPath"
                    :show-file-list="false"
                    disabled
                    :on-success="handlePictureSuccess"
                    :before-upload="beforePictureUpload"
                  >
                    <img v-if="dialogFormVisible && !dialogLoading && temp.ossPicMap['0002']" :src="temp.ossPicMap['0002']" class="commodity">
                    <i v-else class="el-icon-plus commodity-uploader-icon" />
                  </el-upload>
                  <div class="commodity-name">
                    营业执照照片
                    <span
                      class="zoom"
                      @click="handlePictureCardPreview(temp.ossPicMap['0002'])"
                    >
                      <i class="el-icon-zoom-in" />
                    </span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item v-if="dialogFormVisible && !dialogLoading && temp.reg_mer_type === '00'" label="开户许可证：" class="commodity-form-item">
                <div class="commodity-box">
                  <el-upload
                    class="commodity-uploader"
                    :action="uploadPath"
                    :show-file-list="false"
                    disabled
                    :on-success="handlePictureSuccess"
                    :before-upload="beforePictureUpload"
                  >
                    <img v-if="dialogFormVisible && !dialogLoading && temp.ossPicMap['0006']" :src="temp.ossPicMap['0006']" class="commodity">
                    <i v-else class="el-icon-plus commodity-uploader-icon" />
                  </el-upload>
                  <div class="commodity-name">
                    开户许可证照片
                    <span
                      class="zoom"
                      @click="handlePictureCardPreview(temp.ossPicMap['0006'])"
                    >
                      <i class="el-icon-zoom-in" />
                    </span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item v-if="dialogFormVisible && !dialogLoading && temp.reg_mer_type === '02'" label="经营商品：" class="commodity-form-item">
                <div class="commodity-box">
                  <el-upload
                    class="commodity-uploader"
                    :action="uploadPath"
                    :show-file-list="false"
                    disabled
                    :on-success="handlePictureSuccess"
                    :before-upload="beforePictureUpload"
                  >
                    <img v-if="dialogFormVisible && !dialogLoading && temp.ossPicMap['0021']" :src="temp.ossPicMap['0021']" class="commodity">
                    <i v-else class="el-icon-plus commodity-uploader-icon" />
                  </el-upload>
                  <div class="commodity-name">
                    经营商品照片
                    <span
                      class="zoom"
                      @click="handlePictureCardPreview(temp.ossPicMap['0021'])"
                    >
                      <i class="el-icon-zoom-in" />
                    </span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item v-if="dialogFormVisible && !dialogLoading && temp.reg_mer_type === '02'" label="证明材料：" class="commodity-form-item">
                <div class="commodity-box">
                  <el-upload
                    class="commodity-uploader"
                    :action="uploadPath"
                    :show-file-list="false"
                    disabled
                    :on-success="handlePictureSuccess"
                    :before-upload="beforePictureUpload"
                  >
                    <img v-if="dialogFormVisible && !dialogLoading && temp.ossPicMap['0016']" :src="temp.ossPicMap['0016']" class="commodity">
                    <i v-else class="el-icon-plus commodity-uploader-icon" />
                  </el-upload>
                  <div class="commodity-name">
                    租赁协议照片
                    <span
                      class="zoom"
                      @click="handlePictureCardPreview(temp.ossPicMap['0016'])"
                    >
                      <i class="el-icon-zoom-in" />
                    </span>
                  </div>
                </div>
                <div class="commodity-box">
                  <el-upload
                    class="commodity-uploader"
                    :action="uploadPath"
                    :show-file-list="false"
                    disabled
                    :on-success="handlePictureSuccess"
                    :before-upload="beforePictureUpload"
                  >
                    <img v-if="dialogFormVisible && !dialogLoading && temp.ossPicMap['0017']" :src="temp.ossPicMap['0017']" class="commodity">
                    <i v-else class="el-icon-plus commodity-uploader-icon" />
                  </el-upload>
                  <div class="commodity-name">
                    产权证明照片
                    <span
                      class="zoom"
                      @click="handlePictureCardPreview(temp.ossPicMap['0017'])"
                    >
                      <i class="el-icon-zoom-in" />
                    </span>
                  </div>
                </div>
                <div class="commodity-box">
                  <el-upload
                    class="commodity-uploader"
                    :action="uploadPath"
                    :show-file-list="false"
                    disabled
                    :on-success="handlePictureSuccess"
                    :before-upload="beforePictureUpload"
                  >
                    <img v-if="dialogFormVisible && !dialogLoading && temp.ossPicMap['0018']" :src="temp.ossPicMap['0018']" class="commodity">
                    <i v-else class="el-icon-plus commodity-uploader-icon" />
                  </el-upload>
                  <div class="commodity-name">
                    执业资质证照片
                    <span
                      class="zoom"
                      @click="handlePictureCardPreview(temp.ossPicMap['0018'])"
                    >
                      <i class="el-icon-zoom-in" />
                    </span>
                  </div>
                </div>
                <div class="commodity-box">
                  <el-upload
                    class="commodity-uploader"
                    :action="uploadPath"
                    :show-file-list="false"
                    disabled
                    :on-success="handlePictureSuccess"
                    :before-upload="beforePictureUpload"
                  >
                    <img v-if="dialogFormVisible && !dialogLoading && temp.ossPicMap['0019']" :src="temp.ossPicMap['0019']" class="commodity">
                    <i v-else class="el-icon-plus commodity-uploader-icon" />
                  </el-upload>
                  <div class="commodity-name">
                    第三方证明照片
                    <span
                      class="zoom"
                      @click="handlePictureCardPreview(temp.ossPicMap['0019'])"
                    >
                      <i class="el-icon-zoom-in" />
                    </span>
                  </div>
                </div>
                <div class="commodity-box">
                  <el-upload
                    class="commodity-uploader"
                    :action="uploadPath"
                    :show-file-list="false"
                    disabled
                    :on-success="handlePictureSuccess"
                    :before-upload="beforePictureUpload"
                  >
                    <img v-if="dialogFormVisible && !dialogLoading && temp.ossPicMap['0020']" :src="temp.ossPicMap['0020']" class="commodity">
                    <i v-else class="el-icon-plus commodity-uploader-icon" />
                  </el-upload>
                  <div class="commodity-name">
                    其他小微商户证明材料照片
                    <span
                      class="zoom"
                      @click="handlePictureCardPreview(temp.ossPicMap['0020'])"
                    >
                      <i class="el-icon-zoom-in" />
                    </span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item v-if="dialogFormVisible && !dialogLoading && temp.reg_mer_type !== '02'" label="其他证件(选填)：" class="commodity-form-item">
                <div class="commodity-box">
                  <el-upload
                    class="commodity-uploader"
                    :action="uploadPath"
                    :show-file-list="false"
                    disabled
                    :on-success="handlePictureSuccess"
                    :before-upload="beforePictureUpload"
                  >
                    <img v-if="dialogFormVisible && !dialogLoading && temp.ossPicMap['0003']" :src="temp.ossPicMap['0003']" class="commodity">
                    <i v-else class="el-icon-plus commodity-uploader-icon" />
                  </el-upload>
                  <div class="commodity-name">
                    商务税务登记照片
                    <span
                      class="zoom"
                      @click="handlePictureCardPreview(temp.ossPicMap['0003'])"
                    >
                      <i class="el-icon-zoom-in" />
                    </span>
                  </div>
                </div>
                <div class="commodity-box">
                  <el-upload
                    class="commodity-uploader"
                    :action="uploadPath"
                    :show-file-list="false"
                    disabled
                    :on-success="handlePictureSuccess"
                    :before-upload="beforePictureUpload"
                  >
                    <img v-if="dialogFormVisible && !dialogLoading && temp.ossPicMap['0004']" :src="temp.ossPicMap['0004']" class="commodity">
                    <i v-else class="el-icon-plus commodity-uploader-icon" />
                  </el-upload>
                  <div class="commodity-name">
                    组织机构代码照片
                    <span
                      class="zoom"
                      @click="handlePictureCardPreview(temp.ossPicMap['0004'])"
                    >
                      <i class="el-icon-zoom-in" />
                    </span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="辅助材料证明(选填)：" class="commodity-form-item">
                <div class="commodity-box">
                  <el-upload
                    class="commodity-uploader"
                    :action="uploadPath"
                    :show-file-list="false"
                    disabled
                    :on-success="handlePictureSuccess"
                    :before-upload="beforePictureUpload"
                  >
                    <img v-if="dialogFormVisible && !dialogLoading && temp.ossPicMap['0008']" :src="temp.ossPicMap['0008']" class="commodity">
                    <i v-else class="el-icon-plus commodity-uploader-icon" />
                  </el-upload>
                  <div class="commodity-name">
                    辅助材料证明照片
                    <span
                      class="zoom"
                      @click="handlePictureCardPreview(temp.ossPicMap['0008'])"
                    >
                      <i class="el-icon-zoom-in" />
                    </span>
                  </div>
                </div>
              </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="账户信息" name="3">
              <el-form-item label="商户号类型：">
                <el-select v-model="temp.applicationType" placeholder="商户号类型" disabled clearable style="width: 320px" class="filter-item" @change="handleChangeReg">
                  <el-option :key="1" label="APP商户号" :value="1" />
                  <el-option :key="2" label="二维码商户号" :value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="开户账号名称：">
                <el-input v-model="temp.bank_acct_name" placeholder="开户账号名称" disabled style="width: 320px" />
              </el-form-item>
              <el-form-item label="开户行账号：">
                <el-input v-model="temp.bank_acct_no" placeholder="开户行账号" disabled style="width: 320px" />
              </el-form-item>
              <el-form-item label="预留手机号：">
                <el-input v-model="temp.account_bind_phone" placeholder="预留手机号" disabled style="width: 320px" />
              </el-form-item>
              <el-form-item label="开户行所在地：">
                <el-cascader
                  v-model="selectedBankAreaOptions"
                  :options="areaOptions"
                  style="width: 320px"
                  placeholder="开户行所在地"
                  clearable
                  disabled
                  @change="handleBankAreaChange"
                />
              </el-form-item>
              <el-form-item label="支行关键字：">
                <el-input v-model="temp.bank_name" placeholder="支行关键字" disabled style="width: 320px" />
              </el-form-item>
              <el-form-item label="所属支行：">
                <el-input v-model="temp.bank_branch_name" placeholder="所属支行" disabled style="width: 320px" />
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            取消
          </el-button>
          <!-- <el-button type="primary" @click="dialogStatus ==='create'?createData():updateData()">
            确认
          </el-button> -->
        </div>
      </el-dialog>
      <el-dialog :visible.sync="dialogPcitureVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      <el-dialog :visible.sync="dialogExcelVisible" @close="closeExcelDialog">
        <el-form :model="excelTemp" label-position="right" label-width="150px">
          <el-form-item label="商户号类型：">
            <el-select v-model="excelTemp.applicationType" placeholder="商户号类型" style="width: 220px" class="filter-item">
              <el-option :key="1" label="APP商户号" :value="1" />
              <el-option :key="2" label="二维码商户号" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="签约状态：">
            <el-select v-model="excelTemp.uaStatus" placeholder="签约状态" clearable style="width: 220px" class="filter-item">
              <el-option :key="0" label="未签约" value="0000" />
              <el-option :key="1" label="签约中" value="00" />
              <el-option :key="2" label="签约成功" value="01" />
              <el-option :key="3" label="入网审核中" value="02" />
              <el-option :key="4" label="入网成功" value="03" />
              <el-option :key="5" label="入网失败" value="04" />
              <el-option :key="6" label="对公账户待验证或异常" value="05" />
              <el-option :key="7" label="风控审核中" value="06" />
              <el-option :key="8" label="资料验证失败" value="28" />
              <el-option :key="9" label="冻结账户" value="31" />
              <el-option :key="10" label="其它错误" value="99" />
              <el-option :key="11" label="银联驳回" value="104" />
              <el-option :key="12" label="平台关联成功" value="106" />
            </el-select>
          </el-form-item>
          <el-form-item label="开始日期：">
            <el-date-picker
              v-model="excelTemp.startTime"
              type="date"
              style="width: 220px"
              placeholder="选择开始日期"
            />
          </el-form-item>
          <el-form-item label="截止日期：">
            <el-date-picker
              v-model="excelTemp.endTime"
              style="width: 220px"
              type="date"
              placeholder="选择截止日期"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleDownloadExcel()">
            导出Excel
          </el-button>
        </div>
      </el-dialog>
      <el-dialog
        title="提示"
        :visible.sync="dialogDelVisible"
        width="30%"
      >
        <span>确定删除数据？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogDelVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteData">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { merchantNoList, merchantNoAudit, merchantNoDetail, manageSignPageInfo, uploadPath, merchantNoUnionBinding, merchantNoExportExcel, merchantNoDelete } from '@/api/merchant'
import { regionData } from 'element-china-area-data'
import waves from '@/directive/waves' // waves directive
import AyAside from '@/components/Aside'
import Pagination from '@/components/Pagination'
import { getAccountName, getAccountID } from '../../utils/auth'
export default {
  name: 'MerchantManage',
  components: { AyAside, Pagination },
  directives: { waves },
  filters: {
    filterTime(date) {
      if (date) {
        const dateV = new Date(date * 1000)
        var year = dateV.getFullYear()
        var month = dateV.getMonth() + 1
        var day = dateV.getDate()
        var hour = dateV.getHours()
        var minute = dateV.getMinutes()
        var second = dateV.getSeconds()
        if (String(month).length <= 1) {
          month = '0' + month
        }
        if (String(day).length <= 1) {
          day = '0' + day
        }
        if (String(hour).length <= 1) {
          hour = '0' + hour
        }
        if (String(minute).length <= 1) {
          minute = '0' + minute
        }
        if (String(second).length <= 1) {
          second = '0' + second
        }
        return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
      }
    },
    filterApplicationType(val) {
      let resName = '未知商户号类型'
      switch (val) {
        case 1:
          resName = 'APP商户号'
          break
        case 2:
          resName = '二维码商户号'
          break
      }
      return resName
    },
    filterMerchantType(val) {
      let resName = '未知店铺类型'
      switch (val) {
        case '00':
          resName = '企业商户'
          break
        case '01':
          resName = '个体工商户'
          break
        case '02':
          resName = '小微商户'
          break
      }
      return resName
    },
    filterAuditStatus(val) {
      let resName = '未知审核状态'
      switch (val) {
        case 0:
          resName = '未审核'
          break
        case 1:
        case 2:
        case 3:
          resName = '审核通过'
          break
        case 4:
          resName = '审核不通过'
          break
        case 5:
          resName = '审核通过'
          break
      }
      return resName
    },
    filterUaStatus(val) {
      let resName = '未知签约状态'
      switch (val) {
        case '' :
          resName = '未签约'
          break
        case '00':
          resName = '签约中'
          break
        case '01':
          resName = '签约成功'
          break
        case '02':
          resName = '入网审核中'
          break
        case '03':
          resName = '入网成功'
          break
        case '04':
          resName = '入网失败'
          break
        case '05':
          resName = '对公账户待验证或异常'
          break
        case '06':
          resName = '风控审核中'
          break
        case '28':
          resName = '资料验证失败'
          break
        case '31':
          resName = '冻结账户'
          break
        case '99':
          resName = '其它错误'
          break
        case '104':
          resName = '银联驳回'
          break
        case '106':
          resName = '平台关联成功'
          break
      }
      return resName
    },
    filterReturnBankAcctName(val) {
      let resName = ''
      if (val) {
        resName = val.bank_acct_name
      }
      return resName
    }
  },
  data() {
    return {
      loginerId: null,
      uploadPath: '',
      searchDateVal: '',
      isShowFilterBtn: true,
      filterNameKey: '1',
      pageInfo: {},
      listLoading: true,
      dialogLoading: false,
      execelDownloadLoading: false,
      temp: {},
      search: {
        memberId: null, // 会员id
        status: null, // 审核状态(0 未审核/1审核通过/2审核不通过)
        applicationType: null, // 申请类型（1线上/2线下）
        merchantType: null, // 店铺类型 (0 企业/1个人/2小微)
        uaStatus: '', // 签约状态
        submitTime: '' // 提交时间
      },
      excelTemp: { // 导出
        applicationType: 2,
        uaStatus: '03',
        startTime: '',
        endTime: ''
      },
      submitTimeTemp: '', // 提交时间中间量
      tableData: [],
      industryList: [
        {
          id: '0',
          label: '各类专业、技术人员'
        },
        {
          id: '1',
          label: '国家机关、党群组织、企事业单位的负责人'
        },
        {
          id: '2',
          label: '办事人员和有关人员'
        },
        {
          id: '3',
          label: '商业工作人员'
        },
        {
          id: '4',
          label: '服务性工作人员'
        },
        {
          id: '5',
          label: '农林牧渔劳动者'
        },
        {
          id: '6',
          label: '生产工作、运输工作和部分体力劳动者'
        },
        {
          id: '7',
          label: '不便分类的其他劳动者'
        }
      ], // 法人职业列表
      dialogFormVisible: false,
      activeDialogCollapse: '1',
      dialogImageUrl: '', // 放大图片路径
      dialogPcitureVisible: false, // 是否开启弹窗
      dialogExcelVisible: false, // 导出execle弹窗
      dialogDelVisible: false, // 删除弹窗
      delId: null,
      areaOptions: regionData,
      selectedShopAreaOptions: [],
      selectedBankAreaOptions: [],
      industryPOptions: [], // 所属行业
      industryCOptions: [], // 详细行业
      rules: {
        roleName: [{ required: true, message: '角色名称不能为空', trigger: 'change' }]
      },
      pageNum: 1,
      pageSize: 10,
      pageTotal: 0
    }
  },
  watch: {
    submitTimeTemp(newval, oldval) {
      if (!newval) {
        this.search.submitTime = ''
      } else {
        const start = new Date(this.submitTimeTemp[0])
        const resStartDate = start.getFullYear() + '-' + this.doTwoDate((start.getMonth() + 1)) + '-' + this.doTwoDate(start.getDate())
        const resStartTime = this.doTwoDate(start.getHours()) + ':' + this.doTwoDate(start.getMinutes()) + ':' + this.doTwoDate(start.getSeconds())
        const end = new Date(this.submitTimeTemp[1])
        const resEndDate = end.getFullYear() + '-' + this.doTwoDate((end.getMonth() + 1)) + '-' + this.doTwoDate(end.getDate())
        const resEndTime = this.doTwoDate(end.getHours()) + ':' + this.doTwoDate(end.getMinutes()) + ':' + this.doTwoDate(end.getSeconds())
        this.search.submitTime = `${resStartDate} ${resStartTime}-${resEndDate} ${resEndTime}`
      }
    }
  },
  created() {
    this.getList()
    this.pageInfo = this.$route.meta
  },
  mounted() {
    this.uploadPath = uploadPath
    this.loginerId = getAccountID()
  },
  methods: {
    // 导出excel
    handleDownloadExcel() {
      if (this.excelTemp.startTime !== '') {
        if (this.excelTemp.startTime === null) {
          this.excelTemp.startTime = ''
        } else {
          const start = new Date(this.excelTemp.startTime)
          const resStartDate = start.getFullYear() + '-' + this.doTwoDate((start.getMonth() + 1)) + '-' + this.doTwoDate(start.getDate())
          this.excelTemp.startTime = resStartDate
        }
      }
      if (this.excelTemp.endTime !== '') {
        if (this.excelTemp.endTime === null) {
          this.excelTemp.endTime = ''
        } else {
          const end = new Date(this.excelTemp.endTime)
          const resEndDate = end.getFullYear() + '-' + this.doTwoDate((end.getMonth() + 1)) + '-' + this.doTwoDate(end.getDate())
          this.excelTemp.endTime = resEndDate
        }
      }
      merchantNoExportExcel(this.excelTemp)
    },
    // 筛选条件面板状态改变
    handleChangeCollapse(activeNames) {
      if (activeNames.length === 0) {
        this.isShowFilterBtn = false
      } else {
        this.isShowFilterBtn = true
      }
    },
    // 关闭Excel弹窗时
    closeExcelDialog() {
      this.excelTemp = {
        applicationType: 2,
        uaStatus: '03',
        startTime: '',
        endTime: ''
      }
    },
    // 关闭弹窗时
    closeDialog() {
      this.$nextTick(() => {
        this.activeDialogCollapse = '1'
      })
    },
    // 获取表格数据接口
    getList() {
      this.listLoading = true
      return new Promise((resolve, reject) => {
        const param = {}
        Object.assign(param, {
          page: this.pageNum,
          limit: this.pageSize
        }, this.search)
        merchantNoList(param).then(response => {
          this.tableData = response.data.list
          this.pageTotal = response.data.total
          this.listLoading = false
          resolve(true)
        }).catch(error => {
          this.$message({
            message: error,
            type: 'error'
          })
          reject(false)
        })
      }
      )
    },
    // 刷新
    async handleRefresh() {
      if (await this.getList()) {
        this.$message({
          message: '刷新成功',
          type: 'success'
        })
      }
    },
    // 筛选查询操作
    handleSearch() {
      this.pageNum = 1
      this.getList()
    },
    doTwoDate(s) {
      return s < 10 ? '0' + s : s
    },
    // 初始化表单
    resetTemp() {
      this.temp = {
        roleId: undefined,
        roleName: '',
        menuIdList: [],
        remark: ''
      }
    },
    // 重置操作
    handleReset() {
      this.search = {
        memberId: null, // 会员id
        status: null, // 审核状态(0 未审核/1审核通过/2审核不通过)
        applicationType: null, // 申请类型（1线上/2线下）
        merchantType: null, // 店铺类型 (0 企业/1个人/2小微)
        uaStatus: '', // 签约状态
        submitTime: '' // 提交时间
      }
      this.submitTimeTemp = ''
    },
    // 审核通过
    handlePass(id) {
      this.$confirm('审核通过后不可撤销，确定要审核通过?', '提示', {
        confirmButtonText: '通过',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = {
          operationType: 1,
          id: id,
          auditName: getAccountName()
        }
        merchantNoAudit(param).then(response => {
          this.getList()
          this.$message({
            message: response.msg,
            type: 'success'
          })
        })
      }).catch(() => {
      })
    },
    // 审核驳回
    handleBack(id) {
      this.$prompt('', '驳回原因', {
        confirmButtonText: '驳回',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        const param = {
          operationType: 2,
          id: id,
          description: value,
          auditName: getAccountName()
        }
        merchantNoAudit(param).then(response => {
          this.getList()
          this.$message({
            message: response.msg,
            type: 'success'
          })
        })
      }).catch(() => {
      })
    },
    // 绑定关联
    handleBind(id) {
      const param = {
        id: id
      }
      merchantNoUnionBinding(param).then(response => {
        this.getList()
        this.$message({
          message: response.msg,
          type: 'success'
        })
      })
    },
    // 查看详情
    handleDetail(id) {
      this.dialogFormVisible = true
      this.dialogLoading = true
      merchantNoDetail({
        id: id
      }).then(response => {
        this.selectedShopAreaOptions = []
        this.selectedBankAreaOptions = []
        this.temp = Object.assign({}, response.data.getApplicationData)
        this.selectedShopAreaOptions.push(this.temp.shop_province_id, this.temp.shop_city_id, this.temp.shop_country_id)
        this.selectedBankAreaOptions.push(this.temp.accProvinceId, this.temp.accCityId, this.temp.accCountryId)
        this.temp.applicationType = response.data.applicationType
        // this.doSelectManageSignPageInfo()
        this.dialogLoading = false
      }).catch(error => {
        this.$message({
          message: error,
          type: 'error'
        })
      })
    },
    // 删除操作
    handleDelete(id) {
      this.dialogDelVisible = true
      this.delId = id
    },
    deleteData() {
      merchantNoDelete({
        id: this.delId,
        operator: this.loginerId
      }).then(() => {
        this.dialogDelVisible = false
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.getList()
      })
    },
    async doSelectManageSignPageInfo() {
      await this.selectManageSignPageInfo('0', this.temp.reg_mer_type, 1)
      if (await this.selectManageSignPageInfo(this.temp.industryCode, this.temp.reg_mer_type, 2)) {
        this.dialogLoading = false
      }
    },
    // 查询行业
    selectManageSignPageInfo(fCode, isLetter, type) {
      const param = {
        f_code: fCode, // 所属行业传0.详细行业传父级ID
        is_letter: isLetter === '02' ? 1 : 0, // 是否是小微商户 1是0否
        type: type // 1所属行业 2详细行业
      }
      return new Promise((resolve, reject) => {
        manageSignPageInfo(param).then(response => {
          if (fCode === '0') {
            this.industryPOptions = response.data.industry_list
          } else {
            this.industryCOptions = response.data.industry_list
          }
          resolve(true)
        }).catch(error => {
          this.$message({
            message: error,
            type: 'error'
          })
          reject(false)
        })
      })
    },
    // 图片上传成功
    handlePictureSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    // 图片上传前
    beforePictureUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 图片预览
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url
      this.dialogPcitureVisible = true
    },
    // 改变店铺类型
    handleChangeReg(val) {
      this.selectManageSignPageInfo('0', this.temp.reg_mer_type, 1)
      this.temp.industryCode = ''
      this.temp.mccCode = ''
    },
    // 改变所属行业类型
    handleChangeIndustry(val) {
      this.selectManageSignPageInfo(this.temp.industryCode, this.temp.reg_mer_type, 2)
      this.temp.mccCode = ''
    },
    // 选择店铺区域
    handleShopAreaChange(val) {
      this.temp.shop_province_id = val[0]
      this.temp.shop_city_id = val[1]
      this.temp.shop_country_id = val[2]
    },
    // 选择开户行区域
    handleBankAreaChange(val) {
      this.temp.accProvinceId = val[0]
      this.temp.accCityId = val[1]
      this.temp.accCountryId = val[2]
    }
  }
}
</script>

<style lang="scss">
.app-container {
  .el-table {
    .gray-row {
      color: #c2d2d2;
    }
  }
  .add-edit-dialog {
    .el-dialog{
      .el-dialog__body{
        height: 480px;
        overflow: auto;
      }
    }
    .idcard-form-item .el-form-item__content {
      display: flex;
      .idcard-box {
        margin-right: 20px;
        .idcard-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .idcard-uploader .el-upload:hover {
          border-color: #409EFF;
        }
        .idcard-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
        }
        .idcard {
          width: 178px;
          height: 178px;
          display: block;
        }
        .idcard-name {
          text-align: center;
          color: #8c939d;
          .zoom {
            cursor: pointer;
            padding: 6px;
          }
        }
      }
    }
    .place-form-item .el-form-item__content {
      display: flex;
      .place-box {
        margin-right: 20px;
        .place-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .place-uploader .el-upload:hover {
          border-color: #409EFF;
        }
        .place-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
        }
        .place {
          width: 178px;
          height: 178px;
          display: block;
        }
        .place-name {
          text-align: center;
          color: #8c939d;
          .zoom {
            cursor: pointer;
            padding: 6px;
          }
        }
      }
    }
    .commodity-form-item .el-form-item__content {
      display: flex;
      flex-wrap: wrap;
      .commodity-box {
        margin-right: 20px;
        .commodity-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .commodity-uploader .el-upload:hover {
          border-color: #409EFF;
        }
        .commodity-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
        }
        .commodity {
          width: 178px;
          height: 178px;
          display: block;
        }
        .commodity-name {
          text-align: center;
          color: #8c939d;
          .zoom {
            cursor: pointer;
            padding: 6px;
          }
        }
      }
    }
  }
  .el-button--mini{
    padding: 7px;
  }
  .filter-container{
    .el-collapse {
      margin-bottom: 10px;
      .el-collapse-item {
        .el-collapse-item__header {
          font-weight: 600;
        }
      }
    }
    .filter-item {
      margin-left: 0;
      &.refresh-btn{
        background-color: #030303;
        color: azure;
      }
    }
  }
}
</style>
